<script setup lang="ts">
import type { ColProps } from "@arco-design/web-vue";

const leftCol: ColProps = {
  span: 6,
  xxl: 6,
  xl: 8,
  lg: 8,
  md: 10,
  sm: 12,
  xs: 12,
};

const rightCol: ColProps = {
  span: 18,
  xxl: 18,
  xl: 16,
  lg: 16,
  md: 14,
  sm: 12,
  xs: 12,
};
</script>

<template>
  <div class="container">
    <a-row :gutter="24">
      <a-col v-bind="leftCol">
        <a-card>
          <div class="content-topic">
            <p>
              <span>当前：<span style="color: #00afff">蓝色</span></span>
              <span style="margin-left: 20px">未判：<span style="color: #ecdc39">黄色</span></span>
              <span style="margin-left: 20px">已判：<span style="color: #09be49">绿色</span></span>
            </p>
            <div class="newTopicListBox">

            </div>
          </div>
        </a-card>
      </a-col>
      <a-col v-bind="rightCol">
        <a-card>
          <div class="content">
            <div class="content-box">
              <h3>
                本题共计{{ 0 }}份结果需要评审，
                您已经评审{{ 0 }}份，
                目前正在评审第{{ 0}}份，
                还剩{{ 0 }}份。
              </h3>
              <!--              <h3 v-else>-->
              <!--                当前题目没有试卷，暂不需要评审。-->
              <!--              </h3>-->

              <div class="timu">
                <p style="font-size: 20px">{{ 123 }}</p>
                <div>
                  <a-form layout="inline">
                    <a-form-item>
                      <a-button>上一个</a-button>
                    </a-form-item>
                    <a-form-item label="本题得分为">
                      <a-input></a-input>
                    </a-form-item>
                    <a-form-item>
                      <a-button>下一个</a-button>
                    </a-form-item>
                  </a-form>
                </div>
              </div>
              <div class="">
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="scss">
.container {
  :deep(.arco-row) {
    height: 100%;
    .arco-col,
    .arco-card {
      height: 100%;
    }
  }

  .content {
    width: 100%;
    min-height: 500px;
    display: flex;
    gap: 24px;
    &-box {
      height: 100%;
      flex: 1;
    }
    &-topic {
      height: 100%;
      //width: 30%;
    }
  }
  h3 {
    text-align: center;
  }
  .newTopicListBox {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    height: calc(100% - 60px);
    overflow: auto;
  }
  .timu {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding-right: 20%;
    p {
      padding: 0;
      margin: 0;
      line-height: 36px;
      //height: 63px;
    }
  }
}
</style>